<template>
 <div class="page-container">
  <el-table :data="list" border fit highlight-current-row style="width: 100%">
    <el-table-column
      v-loading="loading"
      align="center"
      label="优惠券名称"
      width="180"
      element-loading-text="请给我点时间！"
    >
      <template slot-scope="scope">
        <span>{{ scope.row.themeTitle }}</span>
      </template>
    </el-table-column>

    <el-table-column width="110px" align="center" label="发券类型">
      <template slot-scope="scope">
        <span>{{ scope.row.couponGiveRule}}</span>
      </template>
    </el-table-column>

    <el-table-column width="110px" align="center" label="优惠券类型">
      <template slot-scope="scope">
        <span>{{ scope.row.couponType}}</span>
      </template>
    </el-table-column>

    <el-table-column width="110px" align="center" label="金额抵扣类型">
      <template slot-scope="scope">
        <span>{{ scope.row.couponDeductionType }}</span>
      </template>
    </el-table-column>

    <el-table-column width="110px" align="center" label="面值（元）">
      <template slot-scope="scope">
        <span>{{ scope.row.couponAmount}}元</span>
      </template>
    </el-table-column>

    <el-table-column class-name="status-col" align="center" label="使用渠道" width="110">
      <template slot-scope="scope">
        <span>{{ scope.row.receiveChannelCodes }}</span>
      </template>
    </el-table-column>
    <el-table-column class-name="status-col" align="center" label="券活动日期" width="330">
      <template slot-scope="scope">
        <span>{{ scope.row.startTime }} - {{ scope.row.endTime }}</span>
      </template>
    </el-table-column>
    <el-table-column class-name="status-col" align="center" label="总限领（张）" width="110">
      <template slot-scope="scope">
        <span>{{ scope.row.totalLimit }}</span>
      </template>
    </el-table-column>
    <el-table-column class-name="status-col" align="center" label="每人限领（张）" width="120">
      <template slot-scope="scope">
        <span>{{ scope.row.individualLimit }}</span>
      </template>
    </el-table-column>
    <el-table-column class-name="status-col" align="center" label="使用条件" width="110">
      <template slot-scope="scope">
        <span>满{{ scope.row.useLimit }}元使用</span>
      </template>
    </el-table-column>
    <el-table-column class-name="status-col" align="center" label="创建时间" width="180">
      <template slot-scope="scope">
        <span>{{ scope.row.createTime }}</span>
      </template>
    </el-table-column>
    <el-table-column class-name="status-col" align="center" label="已发行量/已领取/已使用" width="180">
      <template slot-scope="scope">
        <span>{{ scope.row.drawedCoupons }}/{{ scope.row.sendedCouopns }}/{{ scope.row.usedCouopns }}</span>
      </template>
    </el-table-column>
    <el-table-column class-name="status-col" align="center" label="	状态" width="100">
      <template slot-scope="scope">
        <span v-if="scope.row.status ==0">待提交</span>
		<span v-else-if="scope.row.status ==1">待提交1</span>
		<span v-else-if="scope.row.status ==2">待提交2</span>
      </template>
    </el-table-column>
    <el-table-column class-name="status-col" align="center" label="操作" width="200" fixed="right">
      <template slot-scope="scope">
        <span v-if="scope.row.type =='1'">
          <el-button type="text" class="textButton" @click="seeNewTab()">查看</el-button>
          <el-button type="text" class="textButton" @click="copyBtnShow()">复制</el-button>
          <el-button type="text" class="textButton" @click="closeActivity()">关闭</el-button>
          <el-button type="text" class="textButton" @click="initSendCouponModal()">发券</el-button>
        </span>
        <span v-else-if="scope.row.type =='2' || scope.row.type =='3' ">
          <el-button type="text" class="textButton" @click="seeNewTab('filters')">查看</el-button>
          <el-button type="text" class="textButton" @click="copyBtnShow('filters')">复制</el-button>
        </span>
        <span v-else-if="scope.row.type =='5'">
          <el-button type="text" class="textButton" @click="seeNewTab('filters')">查看</el-button>
          <el-button type="text" class="textButton" @click="copyBtnShow('filters')">复制</el-button>
          <el-button type="text" class="textButton" @click="updateBtnShow('filters')">编辑</el-button>
          <el-button type="text" class="textButton" @click="deleteActivity('filters')">删除</el-button>
        </span>
      </template>
    </el-table-column>
  </el-table>

   <el-dialog title="发券" :visible.sync="showModel"  width="30%" height="100%" label-width="80px" label-position="right">
      <el-form style="text-align:left" label-width="80px" label-position="right" size="small">
        <el-row style="margin-top: 10px">
          <el-col :span="12" >
            <el-table-column prop="name" label="优惠券名称" width="180">优惠券名称</el-table-column>
          </el-col>
          <el-col :span="12" >
            <el-table-column prop="name" label="优惠券名称" width="180">小玉专用</el-table-column>
          </el-col>
        </el-row>
         <el-row style="margin-top: 10px">
          <el-col :span="12" >
            <el-table-column prop="name" label="可发行数量" width="180">可发行数量</el-table-column>
          </el-col>
          <el-col :span="12">
            <el-table-column prop="name" label="优惠券名称" width="180">92</el-table-column>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px">
          <el-col :span="12">
            <el-table-column prop="name" label="发放用户手机号" width="180">发放用户手机号</el-table-column>
          </el-col>
          <el-radio-group v-model="radio3" size="small" @change="changes">
            <el-radio label="1" border>手动</el-radio>
            <el-radio label="2" border>CSV模板导入</el-radio>
          </el-radio-group>
  
        </el-row>
        <el-row v-if="input">
          <el-input v-model="themeTitle" style="width:200"></el-input>

        </el-row>
        <el-row v-if="button" style="margin-top: 20px">
           <div style="text-align:center">
            <el-button @click="showModel" type="primary">选择文件</el-button>
            <el-button @click="showModel" type="primary">下载csv模板</el-button>
          </div>
        </el-row>
           
        </el-form>
         
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button @click.native="showModel = false">取消</el-button>
      </div>
    </el-dialog>

 </div>
</template>
 
  
<script>
// import { fetchList } from '@/api/article'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  props: {
    type: {
      type: String,
      default: '0'
    }
  },
  data() {
    return {
      list: [],
      radio3:"1",
      button:false,
      input:true,
      showModel:false,
      tableList:{status0:[{"id":1912250010887324,"themeTitle":"小玉专用","startTime":'2019-12-24 22:33:52',"endTime":'2019-12-27 22:33:55',"createTime":'2019-12-25 22:35:04',"status":'进行中',"couponType":'电子券',"totalLimit":100,"drawedCoupons":4,"sendedCouopns":4,"usedCouopns":0,"availableCoupons":96,"couponGiveRule":'前台领券',"individualLimit":100,"useLimit":51.0000,"remark":"恩恩","themeType":11,"createMerchantId":null,"createMerchantName":null,"couponAmount":50.0000,"couponAmountExt1":null,"ruleType":5,"couponDiscountType":0,"useUpLimit":null,"couponUnit":"元","couponDeductionType":'商品券',"receiveChannelCodes":'BBC',"createUserid":1909160000172983,'type':1},{"id":1912250010821437,"themeTitle":"满50-50","startTime":'2019-12-24 22:23:59',"endTime":'2019-12-27 22:24:03',"createTime":'2019-12-25 22:25:35',"status":'已失效',"couponType":'电子券',"totalLimit":100,"drawedCoupons":0,"sendedCouopns":0,"usedCouopns":0,"availableCoupons":100,"couponGiveRule":'前台领券',"individualLimit":10,"useLimit":51.0000,"remark":"4","themeType":0,"createMerchantId":null,"createMerchantName":null,"couponAmount":50.0000,"couponAmountExt1":null,"ruleType":5,"couponDiscountType":0,"useUpLimit":null,"couponUnit":"元","couponDeductionType":'商品券',"receiveChannelCodes":'BBC',"createUserid":19090215374897,'type':2},{"id":1912250008337302,"themeTitle":"1","startTime":'2019-12-25 16:57:38',"endTime":'201912-31 16:57:40',"createTime":'2019-12-25 16:58:30',"status":'已失效',"couponType":'实体券',"totalLimit":1,"drawedCoupons":0,"sendedCouopns":0,"usedCouopns":0,"availableCoupons":1,"couponGiveRule":'前台领券',"individualLimit":1,"useLimit":2.0000,"remark":null,"themeType":11,"createMerchantId":null,"createMerchantName":null,"couponAmount":1.0000,"couponAmountExt1":null,"ruleType":5,"couponDiscountType":0,"useUpLimit":null,"couponUnit":"元","couponDeductionType":'商品券',"receiveChannelCodes":'BBC',"createUserid":1909160000172983,'type':2},{"id":1912200008104892,"themeTitle":"1111","startTime":'2019-12-19 16:42:48',"endTime":'2019-12-31 16:42:51',"createTime":'2019-12-20 16:43:46',"status":'已失效',"couponType":'电子券',"totalLimit":122,"drawedCoupons":10,"sendedCouopns":8,"usedCouopns":2,"availableCoupons":112,"couponGiveRule":'前台领券',"individualLimit":23,"useLimit":0.0100,"remark":"111","themeType":0,"createMerchantId":null,"createMerchantName":null,"couponAmount":0.0100,"couponAmountExt1":null,"ruleType":5,"couponDiscountType":0,"useUpLimit":null,"couponUnit":"元","couponDeductionType":'商品券',"receiveChannelCodes":'BBC',"createUserid":19090215374897,'type':2},{"id":1912190008524122,"themeTitle":"大额券","startTime":'	2019-12-19 18:16:10',"endTime":'2020-01-01 18:16:12',"createTime":'2019-12-19 18:17:11',"status":'	已关闭',"couponType":'电子券',"totalLimit":100000,"drawedCoupons":8,"sendedCouopns":5,"usedCouopns":3,"availableCoupons":99992,"couponGiveRule":'前台领券',"individualLimit":10000,"useLimit":1.0000,"remark":"1111","themeType":11,"createMerchantId":null,"createMerchantName":null,"couponAmount":100.0000,"couponAmountExt1":null,"ruleType":5,"couponDiscountType":0,"useUpLimit":null,"couponUnit":"元","couponDeductionType":'商品券',"receiveChannelCodes":'BBC',"createUserid":1909160000172983,'type':3},{"id":1912130007299668,"themeTitle":"6rfdg","startTime":'	2019-12-13 14:55:34',"endTime":'2019-12-14 14:55:36',"createTime":'2019-12-13 14:56:29',"status":'	已关闭',"couponType":'电子券',"totalLimit":45,"drawedCoupons":0,"sendedCouopns":0,"usedCouopns":0,"availableCoupons":45,"couponGiveRule":'指定用户发放',"individualLimit":6,"useLimit":4.0000,"remark":null,"themeType":11,"createMerchantId":null,"createMerchantName":null,"couponAmount":45.0000,"couponAmountExt1":null,"ruleType":5,"couponDiscountType":0,"useUpLimit":null,"couponUnit":"元","couponDeductionType":'商品券',"receiveChannelCodes":'BBC',"createUserid":1909160000172983,'type':3},{"id":1912120008077679,"themeTitle":"抽奖券0023","startTime":'	2019-11-28 16:37:47',"endTime":'2019-11-30 16:37:49',"createTime":'2019-12-12 16:39:34',"status":'	已关闭',"couponType":'电子券',"totalLimit":1000,"drawedCoupons":0,"sendedCouopns":0,"usedCouopns":0,"availableCoupons":1000,"couponGiveRule":'抽奖券',"individualLimit":10,"useLimit":1.0000,"remark":"d","themeType":0,"createMerchantId":null,"createMerchantName":null,"couponAmount":1.1000,"couponAmountExt1":null,"ruleType":5,"couponDiscountType":0,"useUpLimit":null,"couponUnit":"元","couponDeductionType":'商品券',"receiveChannelCodes":'BBC',"createUserid":19090215374897,'type':3},{"id":1912120005016337,"themeTitle":"分销测试","startTime":'2019-12-12 10:20:51',"endTime":'2019-12-31 10:20:54',"createTime":'2019-12-12 10:21:42',"status":'	已关闭',"couponType":'电子券',"totalLimit":100,"drawedCoupons":3,"sendedCouopns":1,"usedCouopns":2,"availableCoupons":97,"couponGiveRule":'抽奖券',"individualLimit":10,"useLimit":13.0000,"remark":"1","themeType":11,"createMerchantId":null,"createMerchantName":null,"couponAmount":12.9900,"couponAmountExt1":null,"ruleType":5,"couponDiscountType":0,"useUpLimit":null,"couponUnit":"元","couponDeductionType":'商品券',"receiveChannelCodes":'BBC',"createUserid":1909160000172983,'type':3},{"id":1912110010312204,"themeTitle":"张小二家小额券","startTime":'2019-12-11 21:26:12',"endTime":'2019-12-31 21:26:14',"createTime":'2019-12-11 21:32:09',"status":'	已关闭',"couponType":'电子券',"totalLimit":10000,"drawedCoupons":1,"sendedCouopns":0,"usedCouopns":1,"availableCoupons":9999,"couponGiveRule":'前台领券',"individualLimit":1000,"useLimit":0.0100,"remark":"还有未编辑","themeType":0,"createMerchantId":null,"createMerchantName":null,"couponAmount":1.0000,"couponAmountExt1":null,"ruleType":5,"couponDiscountType":0,"useUpLimit":null,"couponUnit":"元","couponDeductionType":'商品券',"receiveChannelCodes":'BBC',"createUserid":19090215374897,'type':3}],
        status1:[{"id":1912250010887324,"themeTitle":"小玉专用","startTime":'2019-12-24 22:33:52',"endTime":'2019-12-27 22:33:55',"createTime":'2019-12-25 22:35:04',"status":'进行中',"couponType":'电子券',"totalLimit":100,"drawedCoupons":4,"sendedCouopns":4,"usedCouopns":0,"availableCoupons":96,"couponGiveRule":'前台领券',"individualLimit":100,"useLimit":51.0000,"remark":"恩恩","themeType":11,"createMerchantId":null,"createMerchantName":null,"couponAmount":50.0000,"couponAmountExt1":null,"ruleType":5,"couponDiscountType":0,"useUpLimit":null,"couponUnit":"元","couponDeductionType":'商品券',"receiveChannelCodes":'BBC',"createUserid":1909160000172983,'type':1}],
        status2:[{"id":1912250010821437,"themeTitle":"满50-50","startTime":'2019-12-24 22:23:59',"endTime":'2019-12-27 22:24:03',"createTime":'2019-12-25 22:25:35',"status":'已失效',"couponType":'电子券',"totalLimit":100,"drawedCoupons":0,"sendedCouopns":0,"usedCouopns":0,"availableCoupons":100,"couponGiveRule":'前台领券',"individualLimit":10,"useLimit":51.0000,"remark":"4","themeType":0,"createMerchantId":null,"createMerchantName":null,"couponAmount":50.0000,"couponAmountExt1":null,"ruleType":5,"couponDiscountType":0,"useUpLimit":null,"couponUnit":"元","couponDeductionType":'商品券',"receiveChannelCodes":'BBC',"createUserid":19090215374897,'type':2},{"id":1912250008337302,"themeTitle":"1","startTime":'2019-12-25 16:57:38',"endTime":'201912-31 16:57:40',"createTime":'2019-12-25 16:58:30',"status":'已失效',"couponType":'实体券',"totalLimit":1,"drawedCoupons":0,"sendedCouopns":0,"usedCouopns":0,"availableCoupons":1,"couponGiveRule":'前台领券',"individualLimit":1,"useLimit":2.0000,"remark":null,"themeType":11,"createMerchantId":null,"createMerchantName":null,"couponAmount":1.0000,"couponAmountExt1":null,"ruleType":5,"couponDiscountType":0,"useUpLimit":null,"couponUnit":"元","couponDeductionType":'商品券',"receiveChannelCodes":'BBC',"createUserid":1909160000172983,'type':2},{"id":1912200008104892,"themeTitle":"1111","startTime":'2019-12-19 16:42:48',"endTime":'2019-12-31 16:42:51',"createTime":'2019-12-20 16:43:46',"status":'已失效',"couponType":'电子券',"totalLimit":122,"drawedCoupons":10,"sendedCouopns":8,"usedCouopns":2,"availableCoupons":112,"couponGiveRule":'前台领券',"individualLimit":23,"useLimit":0.0100,"remark":"111","themeType":0,"createMerchantId":null,"createMerchantName":null,"couponAmount":0.0100,"couponAmountExt1":null,"ruleType":5,"couponDiscountType":0,"useUpLimit":null,"couponUnit":"元","couponDeductionType":'商品券',"receiveChannelCodes":'BBC',"createUserid":19090215374897,'type':2}],
        status3:[{"id":1912190008524122,"themeTitle":"大额券","startTime":'	2019-12-19 18:16:10',"endTime":'2020-01-01 18:16:12',"createTime":'2019-12-19 18:17:11',"status":'	已关闭',"couponType":'电子券',"totalLimit":100000,"drawedCoupons":8,"sendedCouopns":5,"usedCouopns":3,"availableCoupons":99992,"couponGiveRule":'前台领券',"individualLimit":10000,"useLimit":1.0000,"remark":"1111","themeType":11,"createMerchantId":null,"createMerchantName":null,"couponAmount":100.0000,"couponAmountExt1":null,"ruleType":5,"couponDiscountType":0,"useUpLimit":null,"couponUnit":"元","couponDeductionType":'商品券',"receiveChannelCodes":'BBC',"createUserid":1909160000172983,'type':3},{"id":1912130007299668,"themeTitle":"6rfdg","startTime":'	2019-12-13 14:55:34',"endTime":'2019-12-14 14:55:36',"createTime":'2019-12-13 14:56:29',"status":'	已关闭',"couponType":'电子券',"totalLimit":45,"drawedCoupons":0,"sendedCouopns":0,"usedCouopns":0,"availableCoupons":45,"couponGiveRule":'指定用户发放',"individualLimit":6,"useLimit":4.0000,"remark":null,"themeType":11,"createMerchantId":null,"createMerchantName":null,"couponAmount":45.0000,"couponAmountExt1":null,"ruleType":5,"couponDiscountType":0,"useUpLimit":null,"couponUnit":"元","couponDeductionType":'商品券',"receiveChannelCodes":'BBC',"createUserid":1909160000172983,'type':3},{"id":1912120008077679,"themeTitle":"抽奖券0023","startTime":'	2019-11-28 16:37:47',"endTime":'2019-11-30 16:37:49',"createTime":'2019-12-12 16:39:34',"status":'	已关闭',"couponType":'电子券',"totalLimit":1000,"drawedCoupons":0,"sendedCouopns":0,"usedCouopns":0,"availableCoupons":1000,"couponGiveRule":'抽奖券',"individualLimit":10,"useLimit":1.0000,"remark":"d","themeType":0,"createMerchantId":null,"createMerchantName":null,"couponAmount":1.1000,"couponAmountExt1":null,"ruleType":5,"couponDiscountType":0,"useUpLimit":null,"couponUnit":"元","couponDeductionType":'商品券',"receiveChannelCodes":'BBC',"createUserid":19090215374897,'type':3},{"id":1912120005016337,"themeTitle":"分销测试","startTime":'2019-12-12 10:20:51',"endTime":'2019-12-31 10:20:54',"createTime":'2019-12-12 10:21:42',"status":'	已关闭',"couponType":'电子券',"totalLimit":100,"drawedCoupons":3,"sendedCouopns":1,"usedCouopns":2,"availableCoupons":97,"couponGiveRule":'抽奖券',"individualLimit":10,"useLimit":13.0000,"remark":"1","themeType":11,"createMerchantId":null,"createMerchantName":null,"couponAmount":12.9900,"couponAmountExt1":null,"ruleType":5,"couponDiscountType":0,"useUpLimit":null,"couponUnit":"元","couponDeductionType":'商品券',"receiveChannelCodes":'BBC',"createUserid":1909160000172983,'type':3},{"id":1912110010312204,"themeTitle":"张小二家小额券","startTime":'2019-12-11 21:26:12',"endTime":'2019-12-31 21:26:14',"createTime":'2019-12-11 21:32:09',"status":'	已关闭',"couponType":'电子券',"totalLimit":10000,"drawedCoupons":1,"sendedCouopns":0,"usedCouopns":1,"availableCoupons":9999,"couponGiveRule":'前台领券',"individualLimit":1000,"useLimit":0.0100,"remark":"还有未编辑","themeType":0,"createMerchantId":null,"createMerchantName":null,"couponAmount":1.0000,"couponAmountExt1":null,"ruleType":5,"couponDiscountType":0,"useUpLimit":null,"couponUnit":"元","couponDeductionType":'商品券',"receiveChannelCodes":'BBC',"createUserid":19090215374897,'type':3}],
        status5:[],
        },

      listQuery: {
        page: 1,
        limit: 5,
        type: this.type,
        sort: '+id'
      },
      loading: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      this.$emit('create') // for test
      // fetchList(this.listQuery).then(response => {
        var key = 'status'+this.listQuery.type;
        this.list = this.tableList[key];
        this.loading = false
      // })
    },
    //查看 
    seeNewTab: function() {
      this.$router.push("/QueryPromotion");
    },
    showModel(){
        this.$message({message: "操作成功", type: "success"});
    },
    changes(data){
      if(data==2){
        this.button=true
        this.input=false
      }else if(data==1){
        this.button=false
        this.input=true
      }
    },
    //复制
    copyBtnShow: function() {
      this.$confirm("是否确认复制该活动？", "提示", {
          type: "warning"
        })
        .then(() => {
          this.$message({message: "复制成功", type: "success"});
        })
        .catch(() => {
        });
      
    },
    //关闭
    closeActivity: function() {
      this.$confirm("是否确认关闭活动？", "提示", {
          type: "warning"
        })
        .then(() => {
          this.$message({message: "活动已关闭 ", type: "success"});
        })
        .catch(() => {
        });
      
    },
    deleteActivity: function() {
      this.$confirm("是否确认删除活动？", "提示", {
          type: "warning"
        })
        .then(() => {
          this.$message({message: "删除成功 ", type: "success"});
        })
        .catch(() => {
        });
      
    },
    //发券
    initSendCouponModal: function() {
      this.showModel=true
      
    },
    updateBtnShow: function() {
      
      
    },
    //追加商品
    appendMerchantProduct: function() {
      
    },
    //查看营销报告
    viewMarketingReport: function() {
      // this.$router.push("/MarketingReport");
    },
  }
}
</script>
<style scoped>
  .textButton {
    margin-left: 1px;
  }
</style>
<style scoped>
 /deep/ .el-input__inner {
    width: 200px;
}
 .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
    margin-bottom: 10px;
}
 

</style>

